import React from 'react'
import { GameProvider } from './GameContext'
import GameStats from './components/GameStats'
import OrderQueue from './components/OrderQueue'
import Oven from './components/Oven'
import IngredientsPanel from './components/IngredientsPanel'
import GameControls from './components/GameControls'
import GameOverModal from './components/GameOverModal'


const App: React.FC = () => {
  return (
    <GameProvider>
      <div className="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-white">
        {/* 游戏结束弹窗 */}
        <GameOverModal />
        
        <header className="bg-primary text-white p-4 text-center">
          <h1 className="text-3xl font-bold">披萨大师</h1>
        </header>
        
        <main className="container mx-auto p-4">
          {/* 游戏控制和统计信息 */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
            <div className="game-card">
              <GameStats />
            </div>
            
            <div className="game-card">
              <h2 className="text-xl font-semibold mb-2">游戏控制</h2>
              <GameControls />
            </div>
          </div>
          
          {/* 订单和烤炉 */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
            <div className="game-card md:col-span-1">
              <h2 className="text-xl font-semibold mb-2">订单队列</h2>
              <OrderQueue />
            </div>
            
            <div className="game-card md:col-span-2">
              <h2 className="text-xl font-semibold mb-2">烤炉</h2>
              <Oven />
            </div>
          </div>
          
          {/* 材料面板 */}
          <div className="game-card mb-6">
            <h2 className="text-xl font-semibold mb-2">材料面板</h2>
            <IngredientsPanel />
          </div>
        </main>
        
        <footer className="bg-gray-800 text-white p-4 text-center">
          <p>披萨大师 © 2024</p>
        </footer>
      </div>
    </GameProvider>
  )
}

export default App